<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" >

<head>
    <meta charset="UTF-8">
    <title>商品新增</title>
</head>
<script type="text/javascript" th:src="@{/js/jquery-2.1.4.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-3.3.7-dist/js/bootstrap.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/js/bootstrap-3.3.7-dist/css/bootstrap.min.css}">
<script type="text/javascript" th:src="@{/js/bootstrap-treeview/bootstrap-treeview.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/js/bootstrap-treeview/bootstrap-treeview.min.css}">
<script type="text/javascript" th:src="@{/js/bootStrap-addTabs/bootstrap.addtabs.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/js/bootStrap-addTabs/bootstrap.addtabs.css}">
<script type="text/javascript" th:src="@{/js/bootstrap-table/bootstrap-table.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/js/bootstrap-table/bootstrap-table.min.css}">
<link type="text/css" rel="stylesheet" th:href="@{/js/bootstrap-fileinput/css/fileinput.css}">

<script type="text/javascript" th:src="@{/js/bootstrap-bootbox/bootbox.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-fileinput/js/fileinput.min.js}"></script>
<script th:src="@{/js/bootstrap-fileinput/js/locales/zh.js}"></script>

<body>


<form id="myForm" role="form">
    商品名称：<input type="text" class="form-control" name="product_name"  placeholder="商品名称">
    商品价格：  <input type="text" class="form-control" name="product_price"  placeholder="商品价格">
    商品类型：<select class="selectpicker form-control"
                 data-live-search="true" name="typename" id="addid"></select>
    商品数量：<input type="text" class="form-control" name="product_num"  placeholder="商品数量">
    商品描述：<input type="text" class="form-control" name="product_description" placeholder="商品描述">
    商品图片：<input id="file-Portrait" name="img" class="form-control" type="file">
    <button class="btn btn-primary" type="button" onclick="sub()">确认添加</button>
</form>


</body>

<script >
    $(function(){
        showSel()

    })
    ///动态回显
    function showSel(){
        $.ajax({
            url:"getType",
            dataType : "json",
            success: function(data) {
                var opts = "";
                for( var i = 0 ; i < data.length; i++ ){
                    //id          类型
                    opts += "<option  value='"+data[i].id+"'>"+data[i].typename+"</option>";
                }
                // 查询界面
                $("#addid").append(opts);
            }
        });
    }
    //新增
    function sub(){
        $.ajax({
            url:"addPro",
            data:$("#myForm").serialize(),
            success:function(){
                bootbox.alert({
                    size: "small",
                    message: "添加成功",
                    callback: function(){
                        location.reload();
                        /* your callback code */ }
                })

            }
        })
    }
    //图片上传
    $('#file-Portrait').fileinput({
        language: 'zh', //设置语言
        uploadUrl: "upload", //上传的地址
        allowedFileExtensions : ['jpg', 'png','gif'],//接收的文件后缀,
        maxFileCount: 100,
        enctype: 'multipart/form-data',
        showUpload: true, //是否显示上传按钮
        showCaption: false,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

        //dropZoneEnabled: false,//是否显示拖拽区域
        //minImageWidth: 50, //图片的最小宽度
        //minImageHeight: 50,//图片的最小高度
        //maxImageWidth: 1000,//图片的最大宽度
        //maxImageHeight: 1000,//图片的最大高度
        //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
        //minFileCount: 0,
//     maxFileCount: 10, //表示允许同时上传的最大文件个数
//     enctype: 'multipart/form-data',
//     validateInitialCount:true,
//     previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
//     msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
    });

</script>
</html>